import React, { useEffect } from 'react';
import { Form, Button } from 'antd';
import MyUpload from '@/components/MyUpload/index'
import { Input, Radio } from 'antd';
import { fetchUserInfo, changePassword, changeName, changeSex, changeEmail } from '@/api/userInfo'
import { useSelector } from 'react-redux';
import { message } from 'antd';


const generateFileList = (input) => {
  if (!input || !input.length) { return undefined }
  const urls = Array.isArray(input) ? input : [input]
  return urls.map((url, index) => ({
    uid: `-${index}`,
    name: url.split('/').pop() || '',
    status: 'done',
    url
  }))
}
const Index = () => {
  const [form] = Form.useForm()
  const userInfo = useSelector(state => state.userInfo.userInfo)

  useEffect(() => {
    const fetchUserInfoAndUpdateForm = async () => {
      try {
        const res = await fetchUserInfo({ id: userInfo.id });
        const url = res.image_url;
        if (url) {
          form.setFieldsValue({ ...res, image_url: generateFileList(url), password: '******' });
        }
      } catch (error) {
        console.log(error);
      }
    };

    fetchUserInfoAndUpdateForm();
  }, [userInfo]);

  const handleSaveSettings = async () => {
    const values = await form.getFieldsValue()
    console.log(values)
    if (values.password !== '' && values.password !== '******') {
      await changePassword(userInfo.id, values.password)
    }
    if (values.name !== userInfo.name) {
      await changeName(values.name, userInfo.id)
    }
    if (values.gender !== userInfo.gender) {
      await changeSex(values.gender, userInfo.id)
    }
    if (values.email !== userInfo.email) {
      await changeEmail(values.email, userInfo.id)
    }
    message.success('修改成功')
  };

  return (
    <Form
      form={form}
      name='basic'
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 17 }}
      style={{ maxWidth: 600 }}
    >
      <Form.Item
        name="image_url"
        label="用户头像"
      >
        <MyUpload />
      </Form.Item>
      <Form.Item
        name='account'
        label="用户账号"
      >
        <Input disabled style={{ width: '50%' }} />
      </Form.Item>
      <Form.Item
        name='password'
        label="用户密码"
      >
        <Input style={{ width: '50%' }} />
      </Form.Item>
      <Form.Item
        name='name'
        label="用户姓名"
      >
        <Input style={{ width: '50%' }} />
      </Form.Item>
      <Form.Item
        name='gender'
        label="用户性别"
      >
        <Radio.Group>
          <Radio value='男'>男</Radio>
          <Radio value='女'>女</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item
        name='identity'
        label="用户身份"
      >
        <Input disabled style={{ width: '50%' }} />
      </Form.Item>
      <Form.Item
        name='department'
        label="用户部门"
      >
        <Input disabled style={{ width: '50%' }} />
      </Form.Item>
      <Form.Item
        name='email'
        label="用户邮箱"
      >
        <Input style={{ width: '50%' }} />
      </Form.Item>
      <Form.Item wrapperCol={{ span: 24, offset: 10 }}>
        <Button type='primary' onClick={handleSaveSettings}>保存配置</Button>
      </Form.Item>
    </Form >
  )
};

export default Index;


